<template>
	<view class="flex-colume-start content loginPage">
		<view class="flex-colume-start loginPage" v-if="showLogin">
			<image src="/static/login/main_bg08.png" style="width: 750rpx; height: 351rpx;"></image>
			<view class="loginFormBox">
				<u-form :model="loginForm" ref="loginForm" label-width="0">
					<u-form-item prop="username">
						<u--input placeholderStyle="font-size:28rpx;color: #c0c4cc;" class="input1" border="bottom" clearable
							v-model="loginForm.username" placeholder="请输入账号">
			
						</u--input>
					</u-form-item>
					<u-form-item prop="password">
						<u--input type="password"  placeholderStyle="font-size:28rpx;color: #c0c4cc;" class="input1" border="bottom" clearable
							v-model="loginForm.password" placeholder="请输入密码">
						</u--input>
					</u-form-item>
					<u-form-item>
						<u-button style="margin-top: 50rpx; height: 80rpx; border-radius: 40rpx;" class="sendBtn" loadingSize="10"
							@click="submitBtnClick()" :loading="sureLoading" loadingText="查询">登录</u-button>
					</u-form-item>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import {login} from '@/api/api.js'
	export default {
		data() {
			return {
				sureLoading:false,
				loginForm: {
					username: '',
					password: ''


				},
				loginRules: {
					username: [{
						required: true,
						message: '请输入账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
					
					
				},
				showLogin:false

			}
		},
		onLoad(){
			if (uni.getStorageSync('ele-mix-token')){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}else{
				this.showLogin = true
			}
			
		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginRules)
		},
		methods: {
			submitBtnClick() {
				this.$refs.loginForm.validateField(['username', 'password'], errorsRes => {
					if (!errorsRes || errorsRes.length == 0) {
						this.sureLoading = true
						login({...this.loginForm}).then(res=>{
							this.sureLoading = false
							console.log('123=',res.data)
							if (res.code == 1){
								uni.setStorageSync('ele-mix-token',res.data.utoken)
								uni.reLaunch({
									url:'/pages/index/index'
								})
								return
								
							
							}
							uni.showModal({
								content:res.msg,
								showCancel:false
								
							})
						}).catch(err=>{
							this.sureLoading = false
						})
						
					}
			
				})
			},

		}
	}
</script>
<style>
	page {
		background-color: white;
	}
</style>

<style lang="scss" scoped>
	.loginFormBox {
		margin-top: 80rpx;
		padding: 30rpx;
		width: 90%;

		.input1 {
			width: 100%;
			height: 70rpx;
			font-size: 28rpx;
		}



		.sendBtn {
			color: white;
			background-color: #4985ff;
			height: 72px;
			border-color: white;
		}
	}
</style>